<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <head th:replace="~{common/head}"></head>
    <style>
        /**
         * 图标示例样式(这里单独放页面中)
         * example-icons
         */
        .example-icons {
            padding: 0 20px 10px 20px;
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            -webkit-column-gap: 20px;
            -moz-column-gap: 20px;
            column-gap: 20px;
        }

        .example-icons div {
            line-height: 2.5em;
        }

        .example-icons div span {
            cursor: pointer;
            font-size: 14px;
            text-overflow: ellipsis;
            display: inline-block;
            max-width: calc(100% - 90px);
            overflow: hidden;
            vertical-align: middle;
            white-space: nowrap;
        }

        .example-icons div code:hover,
        .example-icons div span:hover,
        .example-icons div i:hover {
            color: #33cabb;
        }

        .example-icons div code:hover {
            border-color: #33cabb;
        }

        .example-icons div code {
            border: 1px solid #DDD;
            width: 46px;
            margin-left: 2px;
            margin-right: 4px;
            border-radius: 4px;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            line-height: 24px;
            cursor: pointer;
        }

        .example-icons div i {
            display: inline-block;
            width: 32px;
            height: 24px;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            line-height: 24px;
        }

        .example-icons .mdi:before {
            font-size: 24px;
        }
    </style>
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="~{common/aside::aside}"></div>
        <!--End 左侧导航-->

        <!--头部信息aside-->
        <div th:replace="~{common/aside::header}"></div>
        <!--End 头部信息aside-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header"><h4>材料装备消耗品大全  善用Ctrl+F哦</h4>
                            </div>
                            <!--折叠效果-->
                            <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                常用代码
                            </a>
                            <div class="collapse m-t-10" id="collapseExample">
                                <div class="example-icons">
                                    <div><code style="width: 20%" th:text="3340"></code><span th:text="比特币"></span></div>
                                    <div><code style="width: 20%" th:text="1038"></code><span th:text="20点sp"></span></div>
                                    <div><code style="width: 20%" th:text="4438"></code><span th:text="暗黑疫苗"></span></div>
                                    <div><code style="width: 20%" th:text="690000117"></code><span th:text="豪华礼包"></span></div>
                                    <div><code style="width: 20%" th:text="3311"></code><span th:text="次元的碎片"></span></div>
                                    <div><code style="width: 20%" th:text="400330106"></code><span th:text="天选之人"></span></div>
                                    <div><code style="width: 20%" th:text="201590063"></code><span th:text="心悦射手光环"></span></div>
                                    <div><code style="width: 20%" th:text="900000201"></code><span th:text="心悦龙腾光环"></span></div>
                                </div>
                            </div>
                            <!--折叠效果 End-->
                            <hr>
                            <!--手风琴效果 End-->
                            <div class="card-body">
                                <nav>
                                    <ul class="pagination no-border">
                                        总共<a th:text="${page.pages}"/>页|
                                        第<a th:text="${page.getPageNum()}"/>页|
                                        <a th:href="@{/toItem(page=0)}" class="f">首页</a>|
                                        <a th:href="@{/toItem(page=${page.prePage})}" class="f">上一页</a>|
                                        <a th:href="@{/toItem(page=${page.nextPage})}" class="la">下一页</a>|
                                        <a th:href="@{/toItem(page=${page.pages})}" class="la">尾页</a>
                                        <input type="hidden" id="first" th:value="${page.getPageNum()}"/>
                                        <input type="hidden" id="last" th:value="${page.pages}"/>
                                    </ul>
                                </nav>
                                <div class="example-icons">
                                    <div th:each="item:${items}">
                                        <code style="width: 20%" th:text="${item.getIt_no()}"></code><span th:text="${item.getIt_name()}"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- .row -->

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
    $(function () {
        pageNum = $("#first").val();
        lastPage = $("#last").val();
        if (lastPage == pageNum) {

            $('.la').removeAttr('href');//去掉a标签中的href属性
            $('.la').removeAttr('onclick');//去掉a标签中的onclick事件
        } else {
            if (pageNum == 1) {
                $('.f').removeAttr('href');//去掉a标签中的href属性
                $('.f').removeAttr('onclick');//去掉a标签中的onclick事件

            } else if (pageNum != 1) {
                $('.f').attr('', 'href');//添加a标签中的href属性
                $('.f').attr('', 'onclick');//添加a标签中的onclick事件)
            }
            $('.la').attr('', 'href');//添加a标签中的href属性
            $('.la').attr('', 'onclick');//添加a标签中的onclick事件)

        }
    });

</script>
</body>
</html>